<template>
  <div class="equipmentModelManagement">
    <MetaSearchForm @on-search="tableSearch">
      <el-form ref="equipmentModelManagement_form" :model="searchData" label-width="80px">
        <el-form-item label="编号" class="equipmentModelManagement_searchFromItem">
          <el-input v-model="searchData.equipmentModel" placeholder="请输入编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称" class="equipmentModelManagement_searchFromItem">
          <el-input v-model="searchData.equipmentModelName" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="equipmentModelManagementTable"
      class="equipmentModelManagement_table"
      table-title="设备型号列表"
      :is-auto-req="true"
      :req-url="reqUrl"
      :req-data="searchDataForTable"
      req-method="post"
      :display-item="displayItem"
      :line-btn-group="lineBtnGroup"
      :btn-group="btnGroup"
      @lineBtnClick="tableInlineBtnClick"
      @btnClick="tableBtnClick"
    />
    <el-dialog
      v-if="modelEditDialogFlag"
      :title="itemEditData.id && itemEditData.id !== '' ? '编辑设备型号' : '新建设备型号'"
      :visible.sync="modelEditDialogFlag"
      width="60%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="modelInfo_form" :model="itemEditData" label-width="110px" :rules="modelInfoRules">
        <el-form-item label="编号" prop="equipmentModel">
          <el-input v-model="itemEditData.equipmentModel" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="equipmentModelName">
          <el-input v-model="itemEditData.equipmentModelName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="版本说明">
          <el-input v-model="itemEditData.versionRemark" placeholder="请输入版本说明"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="itemEditData.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="newDialogClose()">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="newDialogSubmit()"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import deepClone from '../utils/deepClone'
import MetaPageTable from '../components/MetaPageTable'
import MetaSearchForm from '../components/MetaSearchForm'
export default {
  name: 'equipmentModelManagement',
  components: {
    MetaPageTable,
    MetaSearchForm
  },
  data () {
    return {
      modelEditDialogFlag: false,
      reqUrl: process.env.PROGOO_GATE_WATER + "admin/EquipmentModel",
      searchData : {
        equipmentModelName: '',
        equipmentModel: ''
      },
      searchDataForTable: {},
      itemEditData: {
        equipmentModelName: '',
        equipmentModel: '',
        versionRemark: '',
        remark: ''
      },
      displayItem: [
        {
          label: '编号',
          prop: 'equipmentModel'
        },{
          label: '名称',
          prop: 'equipmentModelName'
        },{
          label: '版本说明',
          prop: 'versionRemark'
        },{
          label: '创建人',
          prop: 'createName'
        },{
          label: '创建时间',
          prop: 'createDate'
        },{
          label: '备注',
          prop: 'remark'
        }
      ],
      btnGroup: [{
        id: 'new',
        title: '新建'
      }],
      lineBtnGroup: [
        {
          id: 'edit',
          title: '编辑',
        },
        {
          id: 'delete',
          title: '删除',
        }
      ],
      modelInfoRules: {
        equipmentModel: [
          { required: true, message: '请输入编号', trigger: 'blur' },
        ],
        equipmentModelName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    // this.initModelData(true)
  },
  methods: {
    initModelData(reflash) {
      this.$nextTick(() => {
        this.$refs.equipmentModelManagementTable.formDataInit(reflash)
      })
    },
    tableBtnClick(item) {
      if (item.button === 'new') {
        this.itemEditData = {
          id: '',
          equipmentModelName: '',
          equipmentModel: '',
          remark: '',
          versionRemark: ''
        }
        this.modelEditDialogFlag = true
      }
    },
    tableInlineBtnClick(item) {
      if (item.button === 'edit') {
        // 省市区
        this.itemEditData = {
          id: item.rows.id,
          equipmentModelName: item.rows.equipmentModelName,
          equipmentModel: item.rows.equipmentModel,
          remark: item.rows.remark ? item.rows.remark : '',
          versionRemark: item.rows.versionRemark ? item.rows.versionRemark : ''
        }
        this.modelEditDialogFlag = true
      }else if(item.button === 'delete') {
        this.$confirm('确认删除当前设备型号？', '确认删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + 'admin/EquipmentModel/delete',
            method: "post",
            data: {
              id: item.rows.id,
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.initModelData(true)
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })

        })

      }
    },
    newDialogClose() {
      this.itemEditData = {
        id: '',
        equipmentModelName: '',
        equipmentModel: '',
        remark: '',
        versionRemark: ''
      }
      this.modelEditDialogFlag = false
    },
    newDialogSubmit() {
      this.$refs['modelInfo_form'].validate((valid) => {
        if (valid) {
          let params = {}
          if(this.itemEditData.id && this.itemEditData.id !== '') {
            params.id = this.itemEditData.id
          }
          params.equipmentModelName = this.itemEditData.equipmentModelName
          params.equipmentModel = this.itemEditData.equipmentModel
          params.remark = this.itemEditData.remark
          params.versionRemark = this.itemEditData.versionRemark
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/EquipmentModel/edit",
            method: "post",
            data: params
          }).then(res => {
            if (res.data.code === 200) {
              this.initModelData(false)
              this.newDialogClose()
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        } else {
          return false;
        }
      });
    },
    tableSearch() {
      let param = {}
      for(let key in this.searchData ) {
        if(key === 'dateBetween') {
          param.datestart = this.searchData[key] && this.searchData[key].length > 0 ? this.searchData[key][0] + ' 00:00:00' : ''
          param.dateend =  this.searchData[key] && this.searchData[key].length > 0 ? this.searchData[key][1] + ' 23:59:59' : ''
        }else {
          param[key] = this.searchData[key]
        }
      }
      this.searchDataForTable = param

      this.initModelData(true)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.equipmentModelManagement{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .equipmentModelManagement_searchFromItem {
    float: left;
  }
  .equipmentModelManagement_table {
    width: 100%;
    overflow-y: unset;
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
